<template>
    <BreadCrumb ref="breadcrumb" :item="item"></BreadCrumb>
    <div class="home-wrapped">
        <div class="swipper-wrapped">
            <el-carousel indicator-position="outside" :interval="4000" type="card" height="320px">
                <el-carousel-item v-for="item in swipperList" :key="item">
                    <img :src="item.set_value" :alt="item.set_name" style="width: 100%; height: 100%;">
                </el-carousel-item>
            </el-carousel>
        </div>
        <div class="layout-wrapped">
            <el-row :gutter="20">
                <el-col :span="6"><div class="company-message-area">
                    <span>公司介绍</span>
                    <div v-html="CompanyIntroduce.set_name1">
                    </div>
                </div></el-col>
                <el-col :span="6"><div class="company-message-area">
                    <span>公司架构</span>
                    <div v-html="CompanyIntroduce.set_name2">
                    </div>
                </div></el-col>
                <el-col :span="6"><div class="company-message-area">
                    <span>公司战略</span>
                    <div v-html="CompanyIntroduce.set_name3">
                    </div>
                </div></el-col>
                <el-col :span="6"><div class="company-message-area">
                    <span>高层介绍</span>
                    <div v-html="CompanyIntroduce.set_name4">
                    </div>
                </div></el-col>
            </el-row>
        </div>
        <div class="two-table-wrapped">
            <div class="company-notice">
                <span>公司公告</span>
                <el-table :show-header="false" :data="tableData" style="width: 100%">
                    <el-table-column prop="date" label="Date" width="180" />
                    <el-table-column prop="name" label="Name" width="180" />
                    <el-table-column prop="address" label="Address" />
                </el-table>
            </div>
            <div class="system-message">
                <span>系统消息</span>
                <el-table :show-header="false" :data="tableData" style="width: 100%">
                    <el-table-column prop="date" label="Date" width="180" />
                    <el-table-column prop="name" label="Name" width="180" />
                    <el-table-column prop="address" label="Address" />
                </el-table>
            </div>
        </div>
    </div>
</template>
<script lang="ts" setup>
import BreadCrumb from "@/components/bread_crumb.vue"
import { getSwipperList, getCompanyIntroduceAll } from "@/api/setting"
import { reactive, ref } from "vue"
const item = ref({
    first: "首页",
    secound: "111"
})
const tableData = [
  {
    date: '2016-05-03',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-04',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
]

const swipperList = ref([])
const CompanyIntroduce = reactive({
    set_name1: "",
    set_name2: "",
    set_name3: "",
    set_name4: "",
})
const initData = async() => {
    const res = await getSwipperList();
    const ress = await getCompanyIntroduceAll()
    console.log(ress,'999999')
    swipperList.value = res.data.data
    CompanyIntroduce.set_name1 = ress.data.data.find(i => i.set_name === "公司介绍").set_text
    CompanyIntroduce.set_name2 = ress.data.data.find(i => i.set_name === "公司架构").set_text
    CompanyIntroduce.set_name3 = ress.data.data.find(i => i.set_name === "公司战略").set_text
    CompanyIntroduce.set_name4 = ress.data.data.find(i => i.set_name === "公司高层").set_text
}
initData();
</script>
<style scoped lang="scss">
.home-wrapped {
    padding: 8px;
    height: calc(100vh - 101px);
    display: flex;
    background: #f5f5f5;
    flex-direction: column;
    .swipper-wrapped {
        padding: 0 20px;
        background: #fff;
        margin-bottom: 8px;
        .el-carousel__item h3 {
            color: #475669;
            opacity: 0.75;
            line-height: 200px;
            margin: 0;
            text-align: center;
        }

        .el-carousel__item:nth-child(2n) {
            background-color: #99a9bf;
        }

        .el-carousel__item:nth-child(2n + 1) {
            background-color: #d3dce6;
        }
    }
    .layout-wrapped {
        padding: 8px;
        margin-bottom: 8px;
        background: #fff;
        .company-message-area{
            background: #f5f5f5;
            height: 200px;
            padding: 8px;
            cursor: pointer;
            span {
                border-bottom: 1px solid #409eff;
                font-size: 14px;
            }
            &:hover {
                background: #eef5ff;
                cursor: pointer;
            }
        }
        .el-row {
            margin-bottom: 20px;
            }
            .el-row:last-child {
            margin-bottom: 0;
            }
            .el-col {
            border-radius: 4px;
            }

            .grid-content {
            border-radius: 4px;
            min-height: 36px;
            }
    }
    .two-table-wrapped {
        height: 300px;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-around;
        background: #fff;

        
        .company-notice {
            height: 240px;
            width: 48%;
            display: flex;
            flex-direction: column;
            span {
                border-bottom: 1px solid #ea0709;
                font-size: 14px;
                margin-bottom: 5px;
            }
        }
        .system-message {
            height: 240px;
            width: 48%;
            display: flex;
            flex-direction: column;
            span {
                margin-bottom: 5px;
                border-bottom: 1px solid #ea0709;
                font-size: 14px;
            }
        }
    }
}
</style>  